<template>
  <div>
    <div>
      <el-form :model="searchForm" inline>
        <el-form-item label="类型名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入"
            maxlength="99"
            @change="handleSearch"
          />
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="id" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="remark" label="备注" />
    </el-table>
    <div>
      <el-pagination
        v-model:current-page="currentPage"
        layout="prev, pager, next"
        :total="pagerTotal"
        :default-page-size="currentPageSize"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handlePageSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { IGetBookTypeResponse, IGetBookTypeOption } from '@/service/api/bookManage/types'
import { getBookTypeApi } from '@/service/api/bookManage/api'
let tableData: IGetBookTypeResponse['list'] = reactive([])
const pagerTotal = ref(0)
const currentPage = ref(1)
const currentPageSize = ref(10)
const searchForm = reactive({
  name: '',
})
onMounted(() => {
  handleSearch()
})
function getBookList(params: { page: number; pageSize: number }) {
  const option: IGetBookTypeOption = {
    page: params.page,
    page_size: params.pageSize,
  }
  if (searchForm.name) {
    option.name = searchForm.name
  }
  getBookTypeApi(option).then((res) => {
    const resData = {
      list: [
        {
          id: 1,
          name: '类型1',
          remark: '备注1',
        },
        {
          id: 2,
          name: '类型2',
          remark: '备注1',
        },
      ],
      total: 12,
      page: params.page,
      page_size: params.pageSize,
    }
    tableData = resData.list
    pagerTotal.value = resData.total
    currentPage.value = resData.page
    currentPageSize.value = resData.page_size
  })
}
function handleSearch() {
  getBookList({
    page: 1,
    pageSize: currentPageSize.value,
  })
}
function handleRefresh() {
  getBookList({
    page: currentPage.value,
    pageSize: currentPageSize.value,
  })
}
function handlePageChange(n: number) {
  currentPage.value = n
  getBookList({
    page: n,
    pageSize: currentPageSize.value,
  })
}
function handlePageSizeChange(n: number) {
  currentPageSize.value = n
  getBookList({
    page: currentPage.value,
    pageSize: n,
  })
}
</script>
